<script setup>
import {computed, ref, watch} from "vue";
import {usePage} from "@inertiajs/vue3";
import {route} from 'ziggy-js'

import AppLogo from "./AppLogo.vue";
import AppTitle from "./AppTitle.vue";
import MajorMenu from "./menu/MajorMenu.vue";
import MinorMenu from "./menu/MinorMenu.vue";

const page = usePage();

const menus = computed(() => page.props.permission_menus ?? []);
const title = computed(() => page.props?.config?.name ?? '预约收银系统');
const icon = computed(() => page.props?.config?.logo ?? '');

const activeMainMenu = ref();
// 是否是多级菜单
const isMultiMenu = ref(true);

const handleActiveMenu = () => {
    const currentRoute = route().current();
    if (currentRoute) {
        // 添加路由匹配的容错处理
        activeMainMenu.value = menus.value.find(menu =>
            menu?.name && currentRoute.startsWith(menu.name)
        ) ?? null;

        isMultiMenu.value = activeMainMenu.value?.children?.length > 0
    }
}


watch(
    () => [route().current(), menus.value],
    () => handleActiveMenu(),
    {immediate: true}
);
</script>

<template>
    <aside :class="{ 'w-[300px]': isMultiMenu, 'w-[64px]': !isMultiMenu }"  class="h-full flex flex-col bg-white">
        <div class="flex-1 flex ">
            <div class="aside-bg w-[64px] h-full flex flex-col items-center py-4 gap-4">
                <app-logo :icon="icon" :title="title" />
                <a-scrollbar :style="{ height: 'calc(100vh - 64px)' }" class="overflow-auto">
                    <MajorMenu :active="activeMainMenu?.active" :items="menus" />
                </a-scrollbar>
            </div>
            <div v-if="isMultiMenu" class="flex flex-col flex-1 overflow-x-hidden">
                <app-title  :title="title" />
                <a-scrollbar :style="{ height: 'calc(100vh - 64px)' }" class="overflow-auto">
                    <MinorMenu :items="activeMainMenu.children ?? []"  />
                </a-scrollbar>
            </div>
        </div>
    </aside>
</template>

<style lang="scss" scoped>
.aside-bg{
    background: linear-gradient(90deg, #006cff, #399efd) !important;
    :deep(.arco-scrollbar){
        width: 100%;
        height: 100%;
    }
}
</style>
